<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})
</script>

<template>
  <div ref="el" class="card">
    <Transition name="animate-fadeInLeft">
      <div v-show="show" class="item">
        <img class="img" src="https://public-oss-file.zmaxfilm.com/website-compress/image-26.png" alt="">
        <div class="float-info right">
          <span class="line-title">
            元宇宙登入门&中瑞影城
          </span>
          <span
            class="mt-[50px] text-666 text-[18px] font-medium leading-[36px]">全国率先引入元宇宙登入门的影院，由中瑞影城与国承1号联手打造，落户全新升级的中瑞影城三迪月星店。融合影院与VR电子竞技（数字游戏+
            体育），给消费者带来全新体验。一键登入，一秒沉浸，一步一世界，从精神到身体的愉悦让身心得到释放。</span>
        </div>
      </div>
    </Transition>
    <Transition name="animate-fadeInRight">
      <div v-show="show" class="item">
        <img class="img ml-auto" src="https://public-oss-file.zmaxfilm.com/website-compress/image-27.png" alt="">
        <div class="float-info left">
          <span class="line-title">
            中瑞剧坊
          </span>
          <span class="mt-[50px] text-666 text-[18px] font-medium leading-[36px]">中瑞剧坊由福州市人民政府、福州市鼓楼区人民政府携手中瑞集团，特邀中国著名导演
            、国家一级编导、第29届北京奥运会开幕式执行导演沈晨担任总导演，打造文化产业精品剧目——坊巷历史文化情境剧《三坊七巷》，将平话、闽剧等传统民俗文化与高科技影音相互结合，是一个与时俱进的传统文化传播平台与独具特色的演艺空间。</span>
        </div>
      </div>
    </Transition>
    <Transition name="animate-fadeInLeft">
      <div v-show="show" class="item">
        <img class="img" src="https://public-oss-file.zmaxfilm.com/website-compress/image-28.png" alt="">
        <div class="float-info right">
          <span class="line-title">
            赵堡太极拳非遗传习馆
          </span>
          <span
            class="mt-[50px] text-666 text-[18px] font-medium leading-[36px]">赵堡太极拳非遗传习馆由中瑞集团设立，于第44届世界遗产大会举行期间正式开馆，位于三坊七巷的福州古厝内，在千年历史坊巷中寻找世界级非遗项目太极拳的文化印记，研习体验福州市非遗项目赵堡太极拳。
            太极拳已于2020年12月被联合国教科文组织列入人类非物质文化遗产代表作名录，目前已有超150个国家和地区的3亿多人长期练习太极拳。
          </span>
        </div>
      </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.card {
  width: 1200px;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 80px;

  .item {
    margin-top: 98px;
    position: relative;

    .img {
      width: 825px;
      height: 617px;
    }

    .float-info {
      top: 50%;
      width: 531px;
      height: 517px;
      padding: 50px;
      display: flex;
      position: absolute;
      background: #FFFFFF;
      flex-direction: column;
      transform: translateY(-50%);
      box-shadow: 0px 0px 41px 2px rgba(220, 220, 220, 0.5);

      &.left {
        left: 0;
      }

      &.right {
        right: 0;
      }
    }
  }
}
</style>
